<template>
    <div class="box">
        <div class="register">
            <div class="input">
                <div class="text">
                    <input type="text" placeholder="用户名" v-model="username">
                </div>
                <div class="password">
                    <input type="password" placeholder="密码" v-model="password">
                </div>
                <div class="repassword">
                    <input type="password" placeholder="确认密码" v-model="repassword">
                </div>
            </div>
            <div class="bottom">
                <button @click="register">
                    <img src="@/assets/right.png" alt="" style="height: 20px;">
                    <span></span><span></span>
                </button>
                <p>已有账号<a @click="login">登录</a></p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqReg } from '../api';
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
//存储注册信息
const userInfo = reactive({
    username: '',
    password: '',
    repassword: ''
})
let { username, password, repassword } = toRefs(userInfo)
const register = async () => {
    if (username.value && password.value && repassword.value) {
        if (password.value === repassword.value) {
            let data = {
                username: username.value,
                password: password.value
            }
            let result = await reqReg(data)
            if (result.data.status == 200) {
                let res = confirm("注册成功，立即登录？")
                if (res) {
                    router.push('/login')
                }
            } else {
                alert(result.data.msg)
            }
        } else {
            alert('请确保两次密码一致')
        }
    } else {
        alert('请确保信息不为空')
    }

}
const login = () => {
    router.push('/login')
}
</script>

<style scoped lang="less">
.box {
    height: 100vh;
    background-color: #000;
}

.register {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    width: 300px;
    background-color: #000;
    box-shadow: 4px 4px 0 inset rgba(255, 255, 255, 0.975);

    .input {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        input {
            height: 30px;
            margin-top: 20px;
            margin-left: 10px;
            padding-left: 15px;
            font-size: 12px;
            color: #fff;
            border: none;
            outline: none;
            background-color: #000;
            border-bottom: 1px #fff solid;
        }
    }

    button {
        position: relative;
        width: 100px;
        height: 30px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: none;
        background-color: rgb(58, 13, 64);
        margin-bottom: 20px;

    }

    p {
        text-align: center;
        color: #fff;
        font-size: 10px;

        a {
            padding: 4px;
            text-decoration: none;
            color: aqua;
        }        
    }
    button span:nth-of-type(1) {
        position: absolute;
        top: -100%;
        right: 0;
        width: 3px;
        height: 100%;
        background-image: linear-gradient(to top, rgb(41, 92, 244), transparent);
        animation: you 1s linear infinite;
        animation-delay: 0.25s;
    }

    @keyframes you {
        0% {
            top: -100%;
        }

        50%,
        100% {
            top: 100%;
        }
    }

    button span:nth-of-type(2) {
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 3px;
        height: 100%;
        background-image: linear-gradient(to bottom, rgb(41, 92, 244), transparent);
        animation: zuo 1s linear infinite;
        animation-delay: 0.75s;
    }

    @keyframes zuo {
        0% {
            bottom: -100%;
        }

        50%,
        100% {
            bottom: 100%;
        }
    }
}
</style>